<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绘制图片</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
</style>

<body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <script>
        /*画布*/
        var canvas = document.getElementById('canvas')
        /**画图片**/
        var ctx = canvas.getContext('2d');
        var ww = window.innerWidth,
            wh = window.innerHeight,
            ox = ww / 2,
            oy = wh / 2;
        canvas.width = ww;
        canvas.height = wh;
        var img = new Image();
        img.src = "http://mtapplet.meitudata.com/mtxx-logo.png";
        img.onload = function () {
            ctx.drawImage(img, ox - 118, oy - 118, 236, 236)//平移坐标系
            // ctx.rotate(10*Math.PI/180);
            // ctx.translate(ox,oy);
            // ctx.fillRect(0,0,200,200);
            // ctx.save();
            // ctx.restore();
        }
    </script>
</body>

</html>